function Swiper(el, options = {w:'580px',h:'180px'})
{
    // this === swiper1/swiper2
    // 保存数据
    this.el = document.querySelector(el)
    this.options = options
    this.t = null  // 用来存放定时器唯一标识 number类型
    this.num = 1  // 存放图片名
    // 启动特效
    this.init()
}

Swiper.prototype.init = function() {
    // this === swiper1/swiper2
    this.resetOptions()
    this.start()
    this.pageOver()
    // this.pageOut()   
}

Swiper.prototype.resetOptions = function() {
    // 确保 不管是否设置都有数据
    // this.options.w = this.options.w || '580px'
    // this.options.h = this.options.h || '180px'

    this.el.style.width = this.options.w
    this.el.style.height = this.options.h
}

Swiper.prototype.start = function() {
    // this === swiper1/swiper2
    // let num = 1 
    // 1 定时器每隔1s切换图片
    this.t = setInterval(() => {// this 父function中的this swiper1/swiper2
        // 2 定时器中-数字+1 过滤最大6
        this.num++
        if (this.num>6) this.num = 1
        // // 3 定时器中-修改图片src地址【封装】
        // this.el.querySelector('img').src = `./imgs/img${num}.jpg`
        // // 4 定时器中-同步分页器 - 干掉别人、照亮自己【封装】
        // this.el.querySelector('ul li.active').className = ''
        // this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
        this.changeImg(this.num)
    }, 1000)
}


Swiper.prototype.pageOver = function() {
    // 1 获取【当前】所有分页li
    let liObjs = this.el.querySelectorAll('ul li')
    // 2 遍历
    liObjs.forEach((item, i)=>{ // this swiper1/swiper2
        // 3 给item绑定移入事件
        // item.onmouseover = function() { // this 事件源 item
        item.onmouseover = () => { // this  swiper1/swiper2
            // 4 事件处理函数中：清除定时器
            clearInterval(this.t)
            // 5 事件处理函数中：改变图片（注：包含分页选中状态）
            this.changeImg(i+1)  // 当前移入的分页索引+1 就是图片名
            // 6 事件处理函数中：将全局中记录的图片名 改成当前的 下一次从当前向后
            this.num = i+1
        }

        // 4 绑定移出事件
        // item.onmouseout = function() { // this 事件源 item
        item.onmouseout = ()=> { // this swiper1/swiper2
            this.pageOut()
        }
    })
}   

Swiper.prototype.pageOut = function() {
    // this swiper1/swiper2
    this.start()
}

Swiper.prototype.changeImg = function(num) {
    // 3 定时器中-修改图片src地址【封装】
    this.el.querySelector('img').src = `./imgs/img${num}.jpg`
    // 4 定时器中-同步分页器 - 干掉别人、照亮自己【封装】
    this.el.querySelector('ul li.active').className = ''
    this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
}


export default Swiper